window.onload =
    function()
    {
        var paperForCircularPath = new Raphael('svg-container', 400, 400);
        var paper = new Raphael('svg-container', 400, 400);

        var wrongAnswer = paper.rect(200, 200, 150, 150)
            .attr(
            {
                fill: 'white',
                'fill-opacity': '0'
            })
            .animate(
            {
                fill: 'red',
                'fill-opacity': '1',
                callback:
                    function()
                    {
                        wrongAnswer
                            .animate(
                            {
                                fill: 'white',
                                'fill-opacity': '0'
                            }, 500)
                    }
            }, 500);
			


			//function pulseCallbackAnimation() {
            //    recty.animate({
			//		fill: 'white',
			//		'fill-opacity': '0'
			//	}, 500)
			//}

            //var wrongAnswerAnimation = Raphael.animation(
            //{
            //    fill: 'red',
            //    'fill-opacity': '1',
            //    callback: pulseCallbackAnimation()
//
            //}, 500);
			
			var recty = paper.rect(200, 0, 100, 100)
				.attr({
					fill: 'white',
					'fill-opacity': '0',
					stroke: 'red'
            });
			

			
			var wrongAnswerAnimation = Raphael.animation(
            {
                fill: 'red',
                'fill-opacity': '1',
                callback:
                    function()
                    {
                        recty
                            .animate(
                            {
                                fill: 'white',
                                'fill-opacity': '0'
                            }, 500)
                    }
            }, 500);

            recty.animate(wrongAnswerAnimation);
			
			
			
			
			

	var expressionSolved = paper.rect(0, 0, 0, 50, 10)
		.attr(
		{
			fill: 'lightgreen',
			stroke: 'none'
		})
		.animate(
		{
			width: 50,
			callback:
				function()
				{
					expressionSolved
						.animate(
						{
							fill: 'white',
							'fill-opacity': '0'
						}, 250)
				}
		}, 250);


    function drawCircularPath(cx, cy, r, pointsCount)
    {
        var result = "";

        var anglesValueProgress = 2 * Math.PI / pointsCount;
        var currentAngle = 0;

        //worst function structure in history
        function calculateNextCirclePoint(currentAngle)
        {
            result += (r * Math.cos(currentAngle) + cx).toFixed(3); // the decimal is rounded to the 3rd digit after the decimal point
            result += ' ';
            result += (r * Math.sin(currentAngle) + cy).toFixed(3);
            result += ' ';
        }

        result += 'M ';

        // closing the circle with the last part
        calculateNextCirclePoint(currentAngle);

        result += 'L ';

        currentAngle += anglesValueProgress;

        for (var i = 0; currentAngle < 2 * Math.PI; i++)
        {
            calculateNextCirclePoint(currentAngle);

            currentAngle += anglesValueProgress;
        }

        // the final part to close the path
        calculateNextCirclePoint(currentAngle);

        return result;
    }

var circularPathObj = paperForCircularPath.path(drawCircularPath(200, 200, 150, 50))
    .attr(
    {
        'stroke-width': 2,
        stroke: 'blue'
    });

circularPathObj.node.id = 'animated-path';

//
// animating a path
//
var path = document.querySelector('#animated-path');
var length = path.getTotalLength();

path.style.transition = path.style.WebkitTransition = 'none';

// starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;

// Trigger a layout so styles are calculated & the browser picks up the starting position before animating
path.getBoundingClientRect();

// Define our transition
path.style.transition = path.style.WebkitTransition =
    'stroke-dashoffset 5s ease-in-out'; // '5s' is the speed of the animation e.g. 2s; 3s

// Execute
path.style.strokeDashoffset = '0';
    };